<script lang="tsx">
import ProForm, { Column } from "@/components/ProForm/index.vue";
import useRender from "@/utils/hooks/render";
import { Input } from "@tarojs/components";
import { onMounted, ref } from "vue";

export default {
  name: "booking-page",
  setup(props, ctx) {
    const columns: Column[] = [
      {
        title: "obj Text",
        dataIndex: "obj.d.text",
      },
      {
        title: "group 1",
        valueType: "group",
        columns: [
          {
            title: "text",
            dataIndex: "text",
          },
          {
            title: "select",
            dataIndex: "select",
            valueType: "select",
            options: [
              // [
              // { value: 1, text: "label 1" },
              // { value: 2, text: "label 2" },
              // ],
              { text: "南京市", value: "NanJing" },
              { text: "无锡市", value: "WuXi" },
              { text: "海北藏族自治区", value: "ZangZu" },
              { text: "北京市", value: "BeiJing" },
              { text: "连云港市", value: "LianYunGang" },
              { text: "浙江市", value: "ZheJiang" },
              { text: "江苏市", value: "JiangSu" },
            ],
          },
          {
            title: "select remote",
            dataIndex: "selectRemote",
            valueType: "select",
            remote() {
              return new Promise((res) => {
                setTimeout(() => {
                  res([
                    // [
                    // { value: 1, text: "label 1" },
                    // { value: 2, text: "label 2" },
                    // ],
                    { text: "南京市", value: "NanJing" },
                    { text: "无锡市", value: "WuXi" },
                    { text: "海北藏族自治区", value: "ZangZu" },
                    { text: "北京市", value: "BeiJing" },
                    { text: "连云港市", value: "LianYunGang" },
                    { text: "浙江市", value: "ZheJiang" },
                    { text: "江苏市", value: "JiangSu" },
                  ]);
                }, 1000);
              });
            },
          },
          {
            title: "textarea",
            dataIndex: "textarea",
            valueType: "textarea",
          },
          {
            title: "file",
            dataIndex: "file",
            valueType: "file",
          },
          {
            title: "date",
            dataIndex: "date",
            valueType: "date",
          },
          {
            title: "time",
            dataIndex: "time",
            valueType: "time",
            fieldProps: {
              type: "datetime",
            },
          },
          {
            title: "render",
            dataIndex: "render",
            render: ({ modal }) => (
              <Input
                value={modal.render}
                onInput={(e) => {
                  modal.render = e.detail.value;
                  return e.detail.value;
                }}
              ></Input>
            ),
          },
        ],
      },
      {
        title: "formList",
        valueType: "formList",
        dataIndex: "formList",
        columns: [
          {
            title: "list-text",
            dataIndex: "list-text",
          },
          {
            title: "list-text2",
            dataIndex: "list-text2",
          },
        ],
      },
    ];

    const initValue = ref({});

    onMounted(() => {
      setTimeout(() => {
        initValue.value = {
          obj: {
            d: {
              text: "1",
            },
          },
          formList: [
            {
              "list-text": "l-1-1",
              "list-text2": "l-1-2",
            },
            {
              "list-text": "l-2-1",
              "list-text2": "l-2-2",
            },
          ],
          text: "2",
          select: "ZangZu",
          selectRemote: "ZangZu",
          textarea: "333\nnext\n444",
          date: "2023-08-31",
          time: "2014-05-06 07:08",
          render: "renderrrrrr",
        };
      }, 1100);
    });

    useRender(() => (
      <div class="booking">
        <ProForm initValue={initValue.value} columns={columns}></ProForm>
      </div>
    ));

    return {
      columns,
    };
  },
};
</script>

<style lang="scss"></style>
